
<template>
    <div class="animate">
        <h2>结合animate动画</h2>
        <button @click="isShow = !isShow">{{isShow?'隐藏':'显示'}}</button>
        <transition enter-active-class="animated rotateOutDownLeft"  leave-active-class="animated rotateOutDownRight" >
            <div class="alert" v-show="isShow">
                我是一个提示弹层
            </div>
        </transition>

        <h2>自定义动画</h2>
        <button @click="isShow2 = !isShow2">{{isShow2?'隐藏':'显示'}}</button>
        <div class="unit"></div>
        <transition name="a">
            <div class="alert2" v-show="isShow2">
                我是一个提示弹层
            </div>
        </transition>
        <h2>自定义动画2</h2>
        <button @click="isShow3 = !isShow3">{{isShow3?'隐藏':'显示'}}</button>
         <div class="unit"></div>
        <transition name="b">
            <div class="alert3" v-show="isShow3">
                我是一个提示弹层
            </div>
        </transition>
    </div>  
</template>
<script>
export default {
    data(){
        return{
            isShow:false,
            isShow2:false,
            isShow3:false
        }
    }
}
</script>
<style scoped>
.animate{
    position: relative;
}
.unit{
    height: 60px;
}
.alert,.alert2,.alert3{
    width: 200px;
    height: 40px;
    color:#fff;
    line-height: 40px;
    font-size: 13px;
    text-align: center;
    background: rgba(243,10,43,.3);  
}

.alert2{
    position:absolute;
    transition: all 1s;
    top:200px;
}
.a-enter-active{
    top:800px;  
}
.a-leave-active{
    top:800px;
}



.alert3{
    position:absolute;
    transition: all 3s;
    top:400px;
}
.b-enter-active{
    top:-40px;   
}
.b-leave-active{
    top:-40px;
}

</style>